import config from "../../config"

export default new (class Food {
  position: { x: number, y: number } = {x: 0, y: 0}
  positionList: { x: number, y: number }[] = []
  foodList: Array<HTMLElement> = []
  maxNumber = config.food.maxNum
  stageWidth: number
  stageHeight: number

  foodDom: HTMLElement

  constructor(public stage = document.querySelector(".stage")!) {
    this.foodDom = document.querySelector('.food')!
    this.stageWidth = this.stage.clientWidth
    this.stageHeight = this.stage.clientHeight

    // 初始化一个食物的位置
    this.position = this.getRandomPosition()
    this.positionList.push(this.position)
    this.render()
  }

  // 渲染食物
  render() {
    // 获取位置集合
    this.getPosCollection()
    // 设置食物样式
    this.setFoodStyle()
    // 设置食物的位置
    this.setPosition()
  }

  // 设置食物的大小
  setFoodStyle() {
    this.foodDom.style.width = config.food.model + 'px'
    this.foodDom.style.height = config.food.model + 'px'
    this.foodDom.style.left = this.position.x + 'px'
    this.foodDom.style.top = this.position.y + 'px'
    // 加入食物列表
    this.foodList.push(this.foodDom)
    // 获取子节点
    const children: HTMLCollection = this.foodDom.children
    for (let i = 0; i < children.length; i++) {
      const ele =  children[i] as HTMLElement
      ele.style.width = config.food.model / 2 - 1 + 'px'
      ele.style.height = config.food.model / 2 - 1 + 'px'
    }
  }

  // 获取随机位置
  getRandomPosition() {
    return {
      x: Math.floor(Math.random() * (this.stageWidth - config.food.model)/ config.food.model) * config.food.model,
      y: Math.floor(Math.random() * (this.stageHeight - config.food.model) / config.food.model) * config.food.model
    }
  }

  // 获取位置集合
  getPosCollection() {
    for (let i = this.positionList.length; i < this.maxNumber; i++) {
      const pos = this.getRandomPosition()
      if (this.checkPosition(pos)) {
        this.positionList.push(pos)
      }
    }
  }

  // 检测重复坐标
  checkPosition(pos: { x: number, y: number }) {
    return !this.positionList.some(item => item.x === pos.x && item.y === pos.y )
  }

  // 设置食物位置
  setPosition() {
    // 创建食物
    this.positionList.forEach(item => {
      // 复制食物
      const food = this.foodDom.cloneNode(true) as HTMLElement
      this.foodList.push(food)
      food.style.left = item.x + 'px'
      food.style.top = item.y + 'px'
      this.stage.appendChild(food)
    })
  }

  // 食物被吃了 移除该食物
  removeFood(x: number, y: number) {
    // 检测食物列表
    this.foodList.forEach(food => {
      if (food.offsetLeft === x && food.offsetTop == y) {
        this.stage.removeChild(food)
      }
    })
    // 检测坐标列表
    this.positionList.forEach((item, index) => {
      if (item.x === x && item.y === y) {
        this.positionList.splice(index, 1)
      }
    })
    // 吃掉食物之后要新增一个食物
    this.getPosCollection()
    this.setSingleFoodPosition()
  }

  // 设置单个食物的位置
  setSingleFoodPosition() {
    // 设置位置
    this.position = this.positionList[this.positionList.length - 1]
    const food = this.foodDom.cloneNode(true) as HTMLElement
    this.foodList.push(food)
    food.style.left = this.position.x + 'px'
    food.style.top = this.position.y + 'px'
    this.stage.appendChild(food)
  }
})
